import React from 'react'
import MenuConfig from './../../config/menuConfig'
import { Menu, Icon } from 'antd';
import {NavLink} from 'react-router-dom'
import './index.less'
const { SubMenu } = Menu;

export default class NavLeft extends React.Component {
    componentWillMount(){
        const menuTreeNode = this.renderMenu(MenuConfig);
        this.setState({
            menuTreeNode
        })
    }
    //菜单渲染
    renderMenu = (data)=>{
        return data.map((item)=>{
            if(item.children){
                return (
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>                   
                    ) 
            }
            return <Menu.Item title={item.title} key={item.key}>
            <NavLink to={item.key}>{item.title}</NavLink>
            </Menu.Item>
           })
    }
    render() {
        return (
            <div className="logo">
                <img src="/assets/logo-ant.svg" alt="" />
                <h1>MS</h1>
                <Menu theme="dark" className="margin-init">
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        );
    }
} 